<template>
    <div>
        <h2>管理员列表</h2>
        <el-card shadow="never" style="margin-bottom: 15px">
            <!-- 搜索部分 -->
            <el-form :inline="true" class="demo-form-inline" :model="searchData">
                <el-form-item label="状态:" prop="state">
                    <el-select v-model="searchData.state" style="width: 250px">
                        <el-option label="显示" :value="1" />
                        <el-option label="隐藏" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="搜索:" prop="name">
                    <el-input v-model="searchData.value" placeholder="请输入姓名或者账号" clear></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button clearable type="primary" @click="searchRoles">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card>
            <el-button type="primary" style="margin-bottom: 10px;" @click="addAdmin()">添加管理员</el-button>
            <BaseTable :columns="columns" :data="tableData.rows" :total="tableData.total" :checkbox="checkbox"
                v-model="pageData">
                <template #role="{ row }">
                    <el-switch v-model="row.state" inline-prompt @change="updateState(row)" :active-value="1"
                        active-text="开启" inactive-text="关闭" :inactive-value="0">
                    </el-switch>
                </template>
                <template #action="{ row }">
                    <a href="#" @click.prevent="updateGoddsFile(row)" style="margin-right: 15px">编辑</a>
                    <a href="#" @click.prevent="SureDeleteBefore(row)">删除</a>
                </template>
            </BaseTable>
        </el-card>
        <ManegerListDia @getAdmin="getAdmin" ref="child" />
    </div>
</template>

<script setup lang="ts">
import api from '@/api';
import { onMounted, ref, reactive, watch, useTemplateRef } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import ManegerListDia from './dialog/ManegerListDia.vue';
import { managerItem } from '@/api/modules/adminList';
const columns = [
    { label: "姓名", prop: "name" }, { label: "账号", prop: "account" },
    { label: "身份", prop: "role.name" }, { label: "最后一次登录时间", prop: "" },
    { label: "最后一次登录ip", prop: "" }, { label: "开启", prop: "role" },
    { label: "操作", prop: "action" }
]
const childRef = useTemplateRef('child');
// 查询管理员的数据
const searchData = ref({
    state: '',
    value: "",
    account: ""
})



let tableData = reactive({
    rows: [],
    total: 0
})
const checkbox = ref(false)
// 分页数据
const pageData = ref<PageQuery>({
    currentPage: 1,
    pageSize: 10
})
// 一个管理员
const ruleForm = ref<any>({})
// 管理员分页条变化
watch(pageData.value, () => {
    getAdmin(), {
        deep: true
    }
})
// 添加管理员
const addAdmin = () => {
    childRef.value!.dialogVisible = true
    // childRef.value!.openDia
}
// 点击查询管理员(搜索功能)
const searchRoles = async () => {
    console.log(2);
    const res = await api.adminList.search({ ...searchData.value, ...pageData.value })
    // console.log(res);
    if (res.code == 200) {
        tableData.rows = res.data.rows
        tableData.total = res.data.total
    }
}

// 删除前确认删除
const SureDeleteBefore = (data: any) => {
    ElMessageBox.confirm(
        '您确认删除吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteGoddsFile(data)
    })
}
// 删除一个管理员
const deleteGoddsFile = (data: any) => {
    api.adminList.remove({
        _id: data._id,
        creator: 'twy'
    }).then(res => {
        if (res.code == 200) {
            getAdmin();
            ElMessage.success('管理员数据删除成功');
        } else {
            ElMessage.error(res.message);
        }
    })
}
onMounted(() => {
    getAdmin()
})
// 获取所有管理员分页
const getAdmin = async () => {
    const res = await api.adminList.search({
        creator: "twy", ...pageData.value
    })
    // console.log(res);

    if (res.code == 200) {
        // console.log(res, 777);
        tableData.rows = res.data.rows
        tableData.total = res.data.total
    }
}
// 点击编辑回显菜单
const updateGoddsFile = (data: managerItem) => {
    childRef.value!.ruleForm = { ...data }
    childRef.value!.dialogVisible = true
    // console.log(data);
}
// 开环按钮的改变
const updateState = async (data: managerItem) => {
    const res = await api.adminList.update({
        ...data,
    })
    searchData.value={}
}
</script>

<style scoped></style>